<template>
  <el-card class="box-card">
    <!-- 添加商品分类的对话框 -->

    <el-button
      color="#5a98de"
      icon="Plus"
      @click="() => dlgCreateOrEdit?.initAndShow()"
      >添加分类</el-button
    >
    <el-button color="#dd514c" icon="Delete">删除分类</el-button>
    <!-- v-model组件身上使用
    第一：相当于给子组件传递props[modelValue]
    第二：相当于给子组件绑定自定义事件update:modelValue -->
    <!-- <Dialog v-model="addCateDialogVisible"></Dialog> -->
    <!-- <DialogCate
      v-model="addCateDialogVisible"
      v-model:parentCateList="parentCateList"
    ></DialogCate> -->
    <DialogCate ref="dlgCreateOrEdit"></DialogCate>

    <el-input
      v-model="filterText"
      placeholder="Filter keyword"
      style="margin-bottom: 18px; margin-top: 20px"
    />

    <el-tree
      ref="treeRef"
      class="filter-tree"
      node-key="id"
      :data="data"
      :props="defaultProps"
      default-expand-all
      :filter-node-method="filterNode"
      show-checkbox
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span>{{ node.label }}</span>
          <span>
            <a @click="" style="color: #409eff"> 编辑分类</a>
            <a
              style="margin-left: 8px; color: #dd514c"
              @click="remove(node, data)"
            >
              删除分类</a
            >
          </span>
        </span>
      </template>
    </el-tree>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, watch, onMounted } from 'vue'
import { ElTree } from 'element-plus'
import { getCategory } from '@/api/category/index'
import DialogCate from '@/views/category/components/DialogCate.vue'
import type Node from 'element-plus/es/components/tree/src/model/node'

//let addCateDialogVisible = ref(false)

//通过定义和组件ref同名的变量来获取组件的实例
const dlgCreateOrEdit = ref<InstanceType<typeof DialogCate> | null>(null)
// const showAddCateDialog = () => {
//   getParentCateList()
//   addCateDialogVisible.value = !addCateDialogVisible.value
//   console.log(addCateDialogVisible.value)
// }

interface Tree {
  [key: string]: any
}

const remove = (node: Node, data: Tree) => {
  const parent = node.parent
  const children: Tree[] = parent.data.children || parent.data
  const index = children.findIndex((d) => d.id === data.id)
  children.splice(index, 1)
  data.value = [...data.value]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
let data = ref([])
const defaultProps = {
  children: 'children',
  label: 'title'
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
  if (!value) return true
  return data.label.includes(value)
}

onMounted(async () => {
  // 在组件挂载后执行的代码
  const res = await getCategory()
  //  console.log(res.data)
  data.value = res.data
})
</script>
<style scoped>
.el-cascader {
  width: 100% !important;
}
.el-button {
  color: #fff;
}
.el-icon {
  color: red;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
